#{extends 'main.html' /}
#{set title:'Create Student' /}

<script type="text/javascript" src="@{'/public/javascripts/anytime.js'}" ></script>
<link type="text/css" rel="stylesheet" href="@{'/public/stylesheets/anytime.css'}" />


<script type="text/javascript">
 
    var mcounter = 2;
    var ecounter = 2;
    
    
    function addButton(name) {
 
        var counter;
	
        if(name == 'MobilePhone') counter = mcounter;
        else counter = ecounter;
        
        if(counter>5){
            alert("Only 5 textboxes allow");
            return false;
	}
        
 	var newTextBoxDiv = $(document.createElement('div'))
	     .attr("id", ''+ name + counter);
        
        newTextBoxDiv.after().html('<label>'+name+' #'+ counter + ' : </label>' +
	      '<input type="text" id = "T'+name+counter+'">');
        
        newTextBoxDiv.appendTo("#"+name+"Group");
        counter++;
        
        if(name == 'MobilePhone') mcounter = counter;
        else ecounter = counter;
        
    }
 
     function removeButton(name) {
	
        var counter;
	
        if(name == 'MobilePhone') counter = mcounter;
        else counter = ecounter;
        
        if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   
 	counter--;
        $("#"+name + counter).remove();
        
        if(name == 'MobilePhone') mcounter = counter;
        else ecounter = counter;
        
      }
 
     function submitForm() {
 
	var mobile = '';
        var email = '';
	for(i=1; i<mcounter; i++){
   	  mobile += $('#TMobilePhone'+ i).val()+';';
	}
        for(i=1; i<ecounter; i++){
   	  email += $('#TEmail' + i).val()+';';
	}
    	 $('#e').val(email); 
         $('#m').val(mobile);
         
     }
  
</script>
 
<h1> Create Student </h1>

<form id ="form" action="@{Application.createStudent()}" method="POST" enctype="multipart/form-data">
    <table border="0">
    <tbody>
    <tr><td>Name</td> 
    <td><input type="text" name="fname" value="" required ="required"/>*</td>
    <td><input type="text" name="mname" value="" required ="required"/>*</td>
    <td><input type="text" name="lname" value="" required ="required"/>*</td></tr>
    <tr><td>Gender</td>
    <td><select name="gender">
    <option>Male</option>
    <option>Female</option>
    </select>
    </td> </tr>
    <tr><td>Date Of Birth</td> <td> <input type="text" name="dateOfBirth" id ="date" required ="required" />* </td></tr>
    <tr><td>Home Address </td><td><input type="text" name="homeAddress" required ="required"/>*</td></tr>
    <tr><td>Home Phone </td><td> <input type="text" name="homePhone" required ="required"/>* </td></tr>
    <tr><td>Membership ID </td><td> <input type="text" name="membershipID" /></td></tr>
    <tr><td>Mobile #1 </td><td> <input type="text" name="mobilePhone1" required ="required"/>* </td></tr>
    <tr><td>Mobile #2 </td><td><input type="text" name="mobilePhone2" value="" /> </td></tr>
    <tr><td>Email #1 </td><td><input type="text" name="email1" required ="required"/>* </td></tr>
    <tr><td>Email #2 </td><td><input type="text" name="email2" value="" /> </td></tr>
    <tr><td>Photo </td><td><input type="file" name="photo" style="width: 13em;"/> </td></tr>
    </tbody>
    </table>
    <br>
    <input type="submit" value="Create"/>
    
</form>
   
<script type="text/javascript">

var rangeDemoFormat = "%d/%m/%Y";
var e = new Date();
var l = new Date();

e.setYear(1980);
l.setYear(2009);

AnyTime.picker("date",
        { earliest: e,
          format: rangeDemoFormat,
          latest: l
        } );
        

</script>

   
    